<template>
    <div class="advert_data">
        <el-card>
            <template #header>
                <span>视频分析</span>
                <date-range v-model="dateTime" @change="getChart"></date-range>
            </template>
            <el-form :model="searchInfo" inline label-width="auto">
                <el-form-item label="视频">
                    <el-select
                        v-model="searchInfo.videoId"
                        filterable
                        clearable
                        @change="getChart"
                    >
                        <el-option :value="x.id"
                                   :label="x.title"
                                   :key="x.id"
                                   v-for="x in videoList"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="投放状态">
                    <dict-select
                        v-model="searchInfo.status"
                        clearable
                        @change="getChart"
                        type="dsp_status"
                        width="auto"
                    />
                </el-form-item>
                <el-form-item label="投放目标">
                    <dict-select
                        v-model="searchInfo.target"
                        clearable
                        @change="getChart"
                        type="dsp_target"
                        width="auto"
                    />
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="mt-4" header="播放量趋势图">
            <line-chart
                v-if="chartData.playChart.length"
                :data="chartData.playChart"
                class="min-h-[calc(100vh-530px)] md:min-h-[calc(100vh-380px)]"
            />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive, computed, nextTick} from "vue"
import DateRange from "@/components/daterange.vue"
import {getListApi, getVideoAnalyze} from "@/api/video/data"
import LineChart from "@/views/Home/components/lineChart.vue"
import DictSelect from "@/components/dictionary/select.vue"
import {playChartApi} from "@/api/home";

interface VideoItem {
    title: string
    id: string | number
}

const searchInfo = ref({
    videoId: undefined,
    status: undefined,
    target: undefined,
})

const chartData = ref({playChart: []})
const dateTime = ref([])

const getChart = async () => {
    const [startDate, endDate] = dateTime.value
    const res = await playChartApi({startDate, endDate})
    if (res.success) {
        chartData.value = res.data as any
    }
}

const videoList = ref([] as VideoItem[])
const getVideoList = async () => {
    const res: any = await getListApi({
        page: 1, pageSize: 999,
        ...searchInfo.value
    })
    if (res.success) {
        videoList.value = (res.data?.records || []) as VideoItem[]
    }
}
getVideoList()
onMounted(() => {
    getChart()
})
</script>

<style lang="scss" scoped>
.advert_data {
    :deep(.el-row) {
        .el-card {
            cursor: pointer;
            background-color: #f5f7fa;

            &.active {
                color: var(--text-color, #3899fd);
                background-color: var(--bg-color, #eaf5ff);
            }

            .el-card__body {
                padding: 10px 12px;
            }
        }
    }
}
</style>
